import { Table, Tag, Space } from 'antd';
import { useEffect } from 'react';
import { connect } from 'dva';
import "antd/es/table/style/index.css"

const { Column, ColumnGroup } = Table;

function dataPage({ data, dispatch }) {
    useEffect(() => {
        dispatch({
            type: 'data/getAll',
        });
    }, []);

    return (
        <Table dataSource={data}>
            <ColumnGroup title="Name">
                <Column title="First Name" dataIndex="firstName" key="firstName" />
                <Column title="Last Name" dataIndex="lastName" key="lastName" />
            </ColumnGroup>
            <Column title="Age" dataIndex="age" key="age" />
            <Column title="Address" dataIndex="address" key="address" />
            <Column
                title="Tags"
                dataIndex="tags"
                key="tags"
                render={tags => (
                    <>
                        {tags.map(tag => (
                            <Tag color="blue" key={tag}>
                                {tag}
                            </Tag>
                        ))}
                    </>
                )}
            />
            <Column
                title="Action"
                key="action"
                render={(text, record) => (
                    <Space size="middle">
                        <a>Edite {record.lastName}</a>
                        <a
                            onClick={() =>
                                dispatch({
                                    type: 'data/deleteData',
                                    payload: {
                                        key: record.key,
                                    },
                                })
                            }>Delete</a>
                    </Space>
                )}
            />
        </Table>
    )
}

export default connect(({ data }) => ({ data }))(dataPage);